<template>
  <div id="city">
    <Header goback="true" headerTitle="搜索地址"></Header>
    <div class="city-content">
      <div class="city-search">
        <el-input
          v-model="searchText"
          placeholder="请输入小区/写字楼/学校等"
          class="search-text"
        ></el-input>
        <el-button
          :class="{ 'sub-search': true, 'sub-focus': subFocus }"
          @click="searchCity"
          >确认</el-button
        >
      </div>
      <p class="city-note">为了满足商家的送餐要求，建议您从列表中选择地址</p>
      <div v-if="searchList && searchList.length > 0" class="search-city-list">
        <ul>
          <li v-for="(item, index) in searchList" class="city-item">
            <p>{{ item.name }}</p>
            <p>{{ item.content }}</p>
          </li>
        </ul>
      </div>
      <div v-else class="search-city-none">
        <div class="city-none">
          <p>找不到地址</p>
          <p>请输入小区，写字楼或学校名</p>
          <p>详细地址(如名牌好) 可稍后输入哦</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../../../../../components/header/header";

export default {
  data() {
    return {
      searchList: [
        {
          name: "麦当劳",
          content:
            "广东省深圳市南山区粤海街道海珠东社区文心六路4号保利文化广场F1",
        },
        {
          name: "麦当劳",
          content:
            "广东省深圳市南山区粤海街道海珠东社区文心六路4号保利文化广场F1",
        },
        {
          name: "麦当劳",
          content:
            "广东省深圳市南山区粤海街道海珠东社区文心六路4号保利文化广场F1",
        },
        {
          name: "麦当劳",
          content:
            "广东省深圳市南山区粤海街道海珠东社区文心六路4号保利文化广场F1",
        },
      ],
      subFocus: false,
    };
  },
  components: {
    Header,
  },
  methods: {
    searchCity() {
      this.subFocus = true;
    },
  },
};
</script>

<style lang="scss" scoped>
//引入公告模块
@import "../../../../../../style/mixin";
#city {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 250;
  @include wh(100%, 100%);
  background: #f2f2f2;
}
.city-content {
  padding-top: 1.95rem;
}
.city-search {
  padding: 0.5rem 0.4rem;
  display: flex;
  background: white;
  .sub-search {
    // @include wh(1.8rem, );
  }
  .search-text {
    flex: 1;
    padding-right: 0.2rem;
  }
}
//清除点击确认后的按钮变化
.city-search {
  .sub-focus {
    background: #3190e8;
    border: 0.05rem solid #dcdfe6;
  }
}
//为了满足...... 备注说明
.city-note {
  text-align: center;
  @include sc(0.65rem, #ff883f);
  background: #fff6e4;
  padding: 0.2rem 0;
}
//搜索结果为空时
.city-none {
  margin-top: 3rem;
  p {
    text-align: center;
    padding-top: 0.5rem;
    @include sc(0.8rem, #666666);
  }
}
//搜索结果列表展示
.city-item {
  padding: 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 0.05rem solid #dddddd;
  p {
    @include sc(0.75rem, #666666);
    padding-top: 0.3rem;
  }
}
</style>
//修改elementUI样式默认样式
<style lang="scss">
.search-text {
  .el-input__inner {
    height: 100%;
    background: #f2f2f2;
  }
  .el-input__inner:focus {
    // outline: none;
    border: 0.05rem solid #dcdfe6;
  }
  .el-input__inner::placeholder {
    font-size: 0.55rem;
    color: #666666;
  }
  .el-input__inner::-webkit-input-placeholder {
    font-size: 0.55rem;
    color: #666666;
  }
  .el-input__inner::-moz-placeholder {
    font-size: 0.55rem;
    color: #666666;
  }
  .el-input__inner::-ms-input-placeholder {
    font-size: 0.55rem;
    color: #666666;
  }
}
.sub-search {
  background: #3190e8;
  span {
    color: #fff;
    font-size: 0.65rem;
  }
}
</style>
